var list_item={
  props:['isList','listItem','isDeleted'],
  template:'<li class="list-li" v-bind:itemId="listItem.id" v-on:mouseenter="mouseMove($event)" v-on:click="mouseClicked($event)" v-on:mouseleave="mouseOut($event)"  v-on:mouseup.right="rightMouseDown($event)">'+
  '<div class="title" >'+
    '<span class="file_icon">'+
      '<i v-if="!listItem.isLeaf" class="file_icon_folder"></i>'+
      '<i v-else class="file_icon_leaf"></i>'+
    '</span>'+
    '<div class="file_name">'+
      '<span class="file_name_span">{{listItem.text}}</span>'+
      '<span class="file_name_span rename" style="display:none"><input type="text" v-on:blur="inputBlur($event)" v-on:keydown.enter="inputBlur($event)" v-model="listItem.text"></span>'+
    '</div>'+
    '<span class="tools" style="display:none;">'+
      '<span title="还原" v-if="isDeleted"><i class="svg_recovery" >&nbsp;</i></span>'+
      '<span title="分享" v-else><i class="svg_share">&nbsp;</i></span>'+
      '<span title="删除" v-if="!isDeleted" v-on:click.stop="del"><i class="svg_del">&nbsp;</i></span>'+
      '<span title="彻底删除" v-else v-on:click.stop="delForever"><i class="svg_del">&nbsp;</i></span>'+
    '</span>'+
    '<span v-if="isList"  class="date">'+
        '<span class="file-date">2017-06-08</span>'+
    '</span>'+
  '</div>'+
  '<div  v-if="!isList && listItem.isLeaf" class="abstract_note">{{listItem.abstract}}</div>'+
  '<div  v-if="!isList" class="data-size">'+
    '<span class="file-date">2017-06-08</span>'+
    '<span v-if="listItem.isLeaf" class="file-size">234 B</span>'+
  '</div></li>',
  methods:{
    "mouseMove":function(event){

      var currEle = event.currentTarget;
      var jqEle = $(currEle);
      var nameel = jqEle.find("div.file_name").children("span[class='file_name_span rename']");

      if(nameel.css("display") !== "none"){
        if(this.isList){
          jqEle.find(".date").css({"display":"none"});
        }
        return false;
      }
      if(this.isList){
        jqEle.find(".date").css({"display":"none"});
        jqEle.find(".tools").css({"display":"block"});
      }else{
        jqEle.find(".tools").css({"display":"block"});
      }
    },
    "mouseOut":function(event){
      var currEle = event.target;
      var jqEle = $(currEle);
      var nameel = jqEle.find("div.file_name").children("span[class='file_name_span rename']");


      if(nameel.css("display") !== "none"){
        if(this.isList){
          jqEle.find(".date").css({"display":"none"});
        }
        return false;
      }
      if(this.isList){
        jqEle.find(".tools").css({"display":"none"});
        jqEle.find(".date").css({"display":"block"})
      }else{
        jqEle.find(".tools").css({"display":"none"});
      }
    },
    "mouseClicked":function(event){
      //target 与 currentTarget的区别
      //target 返回当前触发事件的dom node,currentTarget返回只有设置了事件处理函数的dom node
      var currEle = event.currentTarget ;
      var jqEle = $(currEle);

      jqEle.siblings(".checked").removeClass("checked");
      jqEle.addClass("checked");

    },
    "inputBlur":function(event){
      var jqEle = $(event.currentTarget);
      jqEle.parent().hide();

      //回复列表模式下，日期的显示
      if(this.isList){
        jqEle.parent().parent().siblings("span[class='date']").show();
      }
    },
    "rightMouseDown":function(event){
        var jqEle = $(event.currentTarget);
        var list = $("#list");
        var elLocation = getLocation(list);
        let location = {x:(event.clientX-elLocation.left)+"px",y:(event.clientY-elLocation.top)+"px"};
        var vueInstance = this.$parent.getVueInstance();
        var itemid = jqEle.attr("itemId");
        vueInstance.$refs.list_menu.$el.style="left:"+location.x+";"+"top:"+location.y+";"+"display:block;";
        vueInstance.$refs.list_menu.$data["itemId"] = itemid;
        vueInstance.hideMenu("list-menu");
        if(!vueInstance.menus){
          vueInstance.menus = new Object();

        }
        //if(!this.$parent.menus.hasProperty("list-menu")){
          vueInstance.menus['list-menu'] = vueInstance.$refs.list_menu.$el;
      //  }
      this.mouseClicked(event);
    },
    "delForever":function(){
      //彻底删除逻辑
      window.vm.$refs.delete_confirm_dialog.$data.id = this.listItem.id;
      window.vm.$refs.delete_confirm_dialog.show();
    },
    "del":function(){
      //删除逻辑
      alert(this.listItem.id)
    }
  }
};
var data_list ={
  components:{
    "list-item":list_item
  },
  data:function(){
    return {
      isList:true,
      isDeleted:false,
      hasParent:false,
      lists:[
      ]};
  },
  template:'<ul id="list-ul" class="list-ul" v-if="lists.length>0" >'+
    '<list-item v-for="list_item in lists" :key="list_item.id" v-bind:isDeleted="isDeleted" v-bind:isList="isList" v-bind:listItem="list_item"></list-item>'+
    '</ul>'+
    '<div v-else class="no-content">'+
                        '<div>'+
                            '<p>没有找到文件</p>'+
                            '<button class="btn">新建笔记</button>'+
                        '</div>'+
                    '</div>',
  watch:{
    //watch中值发生变化的时候会自动刷新
    hasParent:function(val){
      if(val){
        $("#returnIcon").removeClass("disable");
      }else {
          $("#returnIcon").addClass("disable");
      }
    },

  },
  methods:{
    "getVueInstance":function(){
      return this.$parent;
    }
  },
  beforeCreate: function () {
  console.log('准备创建组件');
 },
 created: function () {
  console.log('组件创建完毕');
 },
 beforeMount: function () {
  console.log('组件的模板准备挂载到DOM');
 },
 mounted: function () {

  console.log('挂载完毕');
 },
 beforeUpdate: function () {
  console.log('准备更新了');
 },
 updated:function(){
   console.log(this.lists.length)
   if(this.lists.length > 0){
     $("#list_container").mCustomScrollbar({
       "autoHideScrollbar":true,
       "theme":"dark-3"
     });
   }
  console.log('更新完成');
 },
 beforeDestroy: function () {
  console.log('准备destroy');
 },
 destroyed: function () {
  console.log('destroy完成');
 }

};

var list_menu = {
  data:function(){
    return {"itemId":"",
      "menu_items":[
        {"text":"重命名","type":"1"},
        {"text":"移动到","type":"2"},
        {"text":"复制","type":"3"},
        {"text":"删除","type":"4"},
        {"text":"阅读密码","type":"5"}
      ]
    };
  },
  template:'<ul class="list_menu"><li v-for="li in menu_items" v-on:click="eventHandle(li.type)">{{li.text}}</li></ul>',
  methods:{
    "eventHandle":function(type){
      switch (type) {
        case "1":
          var dataListEl = this.$parent.$refs.my_data_list.$el;
          var liEl = $(dataListEl).children("li[itemId='"+ this.itemId +"']");
          var nameel = liEl.find("div.file_name");
          nameel.children(":odd").show();
          nameel.children(":odd").children().focus();
                //nameel.children(":even").hide();
          liEl.find("div[class='tools']").hide();
          liEl.find("div[class='date']").hide();
          break;
        case "2":
          var move_dialog = this.$parent.$refs.move_dialog;
          move_dialog.show();
        break;
        case "5":
          var read_pwd_dialog = this.$parent.$refs.read_pwd_dialog;
          read_pwd_dialog.$set(read_pwd_dialog.$data,"id",this.itemId);
          read_pwd_dialog.show();
        break;
        default:

      }

    }

  },
  watch:{
    "itemId":function(val){
      this.itemId = val;
    }
  }
};
